<template>
	<div id="box">
		<el-form :model="editFrom" :rules="rules" ref="child" label-width="160px">
		<el-row :gutter="20">
  		<el-col :span="12">
  		<el-form-item label="权限名称" prop="name" style='width:460px' >
		<el-input v-model="editFrom.name"></el-input>
		</el-form-item>
		<br>
		<el-form-item label="操作功能" style='width:480px' prop="permission_id">
		<el-checkbox-group v-model="editFrom.permission_id">
		<el-checkbox label="菜单管理/" name="permission_id":disabled="istrue"></el-checkbox>
		<el-checkbox label="运营管理/" name="permission_id":disabled="istrue"></el-checkbox>
		<el-checkbox label="库存管理/" name="permission_id":disabled="istrue"></el-checkbox>
		<el-checkbox label="信息管理/" name="permission_id":disabled="istrue"></el-checkbox>
		<el-checkbox label="财务分析/" name="permission_id":disabled="istrue"></el-checkbox>
		<el-checkbox label="前台系统/" name="permission_id":disabled="isfalse"></el-checkbox>
		<el-checkbox label="系统设置/" name="permission_id":disabled="true"></el-checkbox>
		</el-checkbox-group>
		</el-form-item>
  		</el-col>
  		<el-col :span="12">
  		<el-form-item label="创建者" prop="create_by" style='width:460px' >
		<el-input :value="editFrom.create_by" disabled></el-input>
		</el-form-item>
		<el-form-item label="备注" prop='remark'  style='width:460px'>
				<el-input :maxlength='80' type="textarea" :rows="4" placeholder="请输入备注信息" v-model="editFrom.remark"></el-input>
				</el-form-item>
  		</el-col>
		</el-row>
		<el-form-item style="margin-top: 100px">
		<el-button type="primary" @click="submitForm('child')">确认修改</el-button>
		<el-button @click="resetForm('child')">重置</el-button>
		</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {mapActions} from 'vuex'
	export default{
		name:'edit',
		props:['data'],    
		data(){
			return{
				rules:{
					name:[
						{ required: true, message: '名称不能为空!', trigger: 'blur' },
					],
					permission_id:[
						{ required: true, message: '操作至少选一个!', trigger: 'blur' },
					],
					remark:[
						{ required: true, message: '备注不能为空！', trigger: 'blur' },
					]
				}
			}
		},
		computed:{
			editFrom(){
				return this.data
			},
			editData(){
				let obj = {}
				let str = ''
				this.editFrom.permission_id.forEach(item=>{
					switch(item){
						case '菜单管理/':
						str += '1'
						break;
						case '运营管理/':
						str += '2'
						break;
						case '库存管理/':
						str += '3'
						break;
						case '信息管理/':
						str += '4'
						break;
						case '财务分析/':
						str += '5'
						break;
						case '前台系统/':
						str += '7'
						break;
					}
				})
				for(let key in this.editFrom){
					obj[key] = this.editFrom[key]
				}
				obj.permission_id = Number(str)
				obj.update_by = sessionStorage.getItem('id')
				return obj
			},
			istrue(){
				if(this.editFrom.permission_id.includes('前台系统/')){
					this.editFrom.permission_id = ['前台系统/']
					return true
				}else{
					return false
				}
			},
			isfalse(){
				if(!this.editFrom.permission_id.includes('前台系统/')&&this.editFrom.permission_id.length>0){
					return true
				}else{
					return false
				}
			},
		},
		methods:{
			...mapActions(['editqx']),
			submitForm(formName) {
        		this.$refs[formName].validate((valid) => {
          			if (valid) {
          				let {name,update_by,permission_id,remark,id} = this.editData
          				let obj = {
          					name:name,
          					update_by:update_by,
          					permission_id:permission_id,
          					remark:remark,
          					id:id
          				}
          				this.editqx(obj).then(res=>{
          					if(res === '200'){
          						this.$emit('text',obj)
          						this.log('修改'+obj.name+'权限')
								this.$message({
									showClose: true,
									message: '修改成功!',
									type: 'success'
								});
          					}else{
          						this.$message({
          							showClose: true,
          							message: '修改失败!',
          							type: 'error'
        						});
          					}
          				})
          				
          			} else {
            			console.log('error submit!!');
            			return false;
          			}
        		});
      		},
      		resetForm(formName) {
        		this.$refs[formName].resetFields();
      		}
		}
	}
</script>